<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="catering.css">
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <el-container>
    <!--头部header-->
    <el-header style="background-color: #545c64;border-radius: 10px">
      <h1 style="color: #ffd04b;font-size: 22px;line-height:20px">
        餐饮后台管理系统
      <span style="float: right">
        欢迎{{user.nickname}}回来
        <a href="javascript:void(0)" @click="logout()">退出登录</a>
      </span>
      </h1>
    </el-header>
    <!--内容-->
    <el-container>
      <!--内容——左侧边栏-->
      <el-aside>
        <el-menu @select="handleSelect"
                 background-color="#545c64"
                 text-color="#fff"
                 active-text-color="#ffd04b">
          <el-menu-item index="1">
            <i class="el-icon-s-flag"></i>
              <span slot="title">权限管理</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-s-flag"></i>
              <span>员工管理</span>
            </template>
            <el-menu-item index="2-1">员工列表</el-menu-item>
            <el-menu-item index="2-2">添加员工</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-s-flag"></i>
              <span>菜品管理</span>
            </template>
            <el-submenu index="3-1">
              <template slot="title">菜品列表</template>
              <el-menu-item index="3-1-1">总菜单</el-menu-item>
              <el-menu-item index="3-1-2" v-for="t in typeArr" @click="select(t.id)">{{t.name}}</el-menu-item>

            </el-submenu>
            <el-menu-item index="3-2">添加菜品</el-menu-item>
            <el-menu-item index="3-3">添加分类</el-menu-item>
          </el-submenu>



          <el-submenu index="4">
            <template slot="title"><i class="el-icon-s-flag"></i>
              <span>会员管理</span>
            </template>
            <el-menu-item index="4-1">会员列表</el-menu-item>
            <el-menu-item index="4-2">添加会员</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title"><i class="el-icon-s-flag"></i>
              <span>订单管理</span>
            </template>
            <el-menu-item index="5-1">订单列表</el-menu-item>
            <el-menu-item index="5-2">新增订单</el-menu-item>
          </el-submenu>
          <el-menu-item index="6">
            <i class="el-icon-s-flag"></i>
              <span slot="title">菜品分析</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!--内容——右侧内容主题-->
      <el-main>
        <!--权限管理开始-->
        <el-table v-if="currentIndex=='1'" :data="rightArr">
          <el-table-column label="姓名" prop="name"></el-table-column>
          <el-table-column label="职务" prop="job"></el-table-column>
          <el-table-column label="权限等级" prop="right"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      type="danger"
                      @click="handleCategoryDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--权限管理结束-->
        <!--员工列表开始-->
        <el-table v-if="currentIndex=='2-1'" :data="staffArr">
          <el-table-column label="编号" prop="id"></el-table-column>
          <el-table-column label="姓名" prop="name"></el-table-column>
          <el-table-column label="性别" prop="gender"></el-table-column>
          <el-table-column label="职务" prop="job"></el-table-column>
          <el-table-column label="工资" prop="sal"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      type="danger"
                      @click="handleCategoryDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--员工列表结束-->
        <!--菜品列表开始-->
        <el-card v-if="currentIndex=='3-1-1'">
          <el-table  :data="Menu_Total_Arr">
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="创建时间" prop="created"></el-table-column>
            <el-table-column label="菜品名称" prop="title" ></el-table-column>
            <el-table-column label="菜品图片"  width="206px">
              <template slot-scope="scope">
                <img :src="scope.row.url" width="100%">
              </template>
            </el-table-column>
            <el-table-column label="菜品销量" prop="saleCount" ></el-table-column>
            <el-table-column label="菜品价格" prop="price" ></el-table-column>
            <el-table-column label="操作">
              <!--template 是自定义列时必须添加的标签，必须要有slot-scope-->
              <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="primary"
                        @click="handleCommodityAmend(scope.$index, scope.row)">修改</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleCommodityDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>

          </el-table>
        </el-card>
        <el-card v-if="currentIndex=='3-1-2'">
          <el-table  :data="dishArr">
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="创建时间" prop="created"></el-table-column>
            <el-table-column label="菜品名称" prop="title" ></el-table-column>
            <el-table-column label="商品图片"  width="206px">
              <template slot-scope="scope">
                <img :src="scope.row.url" width="100%">
              </template>
            </el-table-column>
            <el-table-column label="菜品销量" prop="saleCount" ></el-table-column>
            <el-table-column label="菜品价格" prop="price" ></el-table-column>
            <el-table-column label="操作">
              <!--template 是自定义列时必须添加的标签，必须要有slot-scope-->
              <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="primary"
                        @click="handleCommodityAmend(scope.$index, scope.row)">修改</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleCommodityDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>

          </el-table>
        </el-card >

        <!--菜品列表结束-->
        <!--会员列表开始-->
        <el-table v-if="currentIndex=='4-1'" :data="memberArr">
          <el-table-column label="id卡号" prop="id"></el-table-column>
          <el-table-column label="姓名" prop="name"></el-table-column>
          <el-table-column label="性别" prop="gender"></el-table-column>
          <el-table-column label="卡上余额" prop="balance"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      type="danger"
                      @click="handleCategoryDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--会员列表结束-->
        <!--订单列表开始-->
        <el-table v-if="currentIndex=='5-1'" :data="orderInformationArr">
          <el-table-column label="交易时间" prop="date"></el-table-column>
          <el-table-column label="桌号" type="index"></el-table-column>
          <el-table-column label="用餐人数" prop="num"></el-table-column>
          <el-table-column label="菜品详情" prop="particulars">
            <template>
              <el-popover
                      placement="right"
                      width="400"
                      style="height: 400px"
                      trigger="click">
                <el-table :data="orderInformationArr">
                  <el-table-column width="150" type="index" label="序号"></el-table-column>
                  <el-table-column width="100" property="cuisine" label="菜品"></el-table-column>
                  <el-table-column width="300" property="price" label="价格"></el-table-column>
                  <el-table-column width="300" property="totalPrice" label="总价"
                  ></el-table-column>
                </el-table>
                <el-button slot="reference">查询订单详情</el-button>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="交易价格" prop="Price"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      type="danger"
                      @click="handleProductDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--订单列表结束-->
        <!--菜品分析开始-->
        <template v-if="currentIndex=='6'">
          <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="月销量排行" name="first">
              <template>
                <el-table
                        :data="tableData"
                        height="250"
                        border
                        style="width: 100%">
                  <el-table-column
                        prop="ranking"
                        label="排名"
                        width="180">
                  </el-table-column>
                  <el-table-column
                          prop="cuisine"
                          label="菜品"
                          width="180">
                  </el-table-column>
                  <el-table-column
                          prop="sales"
                          label="销量">
                  </el-table-column>
                </el-table>
              </template>
            </el-tab-pane>
            <el-tab-pane label="总销量排行" name="second">
              <template>
                <el-table
                        :data="tableData"
                        height="250"
                        border
                        style="width: 100%">
                  <el-table-column
                          prop="ranking"
                          label="排名"
                          width="180">
                  </el-table-column>
                  <el-table-column
                          prop="cuisine"
                          label="菜品"
                          width="180">
                  </el-table-column>
                  <el-table-column
                          prop="sales"
                          label="销量">
                  </el-table-column>
                </el-table>
              </template>
            </el-tab-pane>
            <el-tab-pane label="月流水图" name="third">
              <img src="imgs/TaoXingTu.jpg" alt="图片加载失败">
            </el-tab-pane>
            <el-tab-pane label="总营业额数据" name="fourth"></el-tab-pane>
          </el-tabs>
        </template>
        <!--菜品分析结束-->
      </el-main>
    </el-container>
  </el-container>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        user:{},
        activeName: 'second',
        currentIndex:"3-1-1",
        /*菜品数组*/
        /*总菜单*/
        Menu_Total_Arr:[
        ],
        /*菜单分类*/
        typeArr:[],
        /*分菜单*/
        dishArr:[],

        /*订单信息数组*/
        orderInformationArr:[{date:'2023.04.17',num:'3',cuisine:'手撕包菜',price:'18'},
          {date:'',cuisine:'红烧肉',price:'36'},
          {date:'',cuisine:'酸辣土豆丝',price:'15'},
          {date:'',cuisine:'清炒白菜',price:'21'},
          {date:'',cuisine:'香酥猪蹄',price:'20'},
          {date:'',cuisine:'豆腐鲫鱼汤',price:'76'},
        ],

        /*菜品分析*/
        activeName: "",
        /*月销量排行*/
        tableData: [
          {ranking:"1",cuisine:"豆腐鲫鱼汤",sales:"560"},
          {ranking:"2",cuisine:"老白干",sales:"460"},
          {ranking:"3",cuisine:"清炒白菜",sales:"420"},
        ],
        /*总销量排行*/
        tableData: [
          {ranking:"1",cuisine:"豆腐鲫鱼汤",sales:"560"},
          {ranking:"2",cuisine:"老白干",sales:"460"},
          {ranking:"3",cuisine:"清炒白菜",sales:"420"},
        ],

        /*员工数组*/
        staffArr:[
          {id:1,name:"张山",gender:"男",job:"小组长",sal:8000},
          {id:2,name:"李思",gender:"女",job:"厨师",sal:7000},
          {id:3,name:"王舞",gender:"女",job:"服务员",sal:6000},
          {id:4,name:"赵柳",gender:"男",job:"清洁工",sal:5000},
        ],


        /*权限管理数据表*/
        rightArr:[
          {name:"赵发财",job:"Boos",right:"1"},
          {name:"张山",job:"小组长",right:"2"},
          {name:"李思",job:"厨师",right:"3"},
          {name:"王舞",job:"服务员",right:"3"},
          {name:"赵柳",job:"清洁工",right:"3"},
        ],

        /*会员数组*/
        memberArr:[
          {id:"1",name:"王老五",gender:"男",balance:650},
          {id:"2",name:"赵老刘",gender:"男",balance:450},
          {id:"3",name:"刘天朗",gender:"男",balance:700},
          {id:"4",name:"赵天",gender:"男",balance:580},
      ]


      }
    },
    methods:{
      logout(){
        if (confirm("您确定退出登录吗？")){
          axios.get("/logout").then(function () {
            location.href="/";//显示首页
          })
        }
      },
      handleSelect(key,keyPath){
        if (key=='2-2'){
          location.href="staff_add.html";
        }else if(key=='3-2'){
          location.href="dishes_add.html";
        }else if(key=='3-3'){
          let name = prompt("请输入分类的名称");
          if (name==null){//代表用户取消了操作
            return;
          }
          if (name.trim()==""){
            v.$message.error("请输入分类名称!");
            return;
          }
          //发出添加分类的请求
          axios.post("/type/insert?name="+name).then(function () {
            location.reload();
          });
        }else if(key=='4-2'){
          location.href="member_add.html";
        }else if(key=='5-2'){
          location.href="addOrder.html";
        }else {
          v.currentIndex = key;
        }
      },
      select(id){
        axios.get("/dish/selectByTypeId?id="+id).then(function (response) {
          v.dishArr=response.data;
        })
      },

      handleCommodityAmend(){},

      handleCommodityDelete(i,c){
        if (confirm("您确认删除此菜品吗?")){
          axios.post("/dish/delete?id="+c.id).then(function () {
            v.Menu_Total_Arr.splice(i,1);
            v.$message.success("成功删除了"+c.title);
          })
        }

      },

      handleClick(tab, event) {
        console.log(tab, event);
      },

    },
    created:function () {
      axios.get("/currentUser").then(function (response) {
        if (response.data == "") {
          alert("请先登录!")
          location.href = "/login.html";
        } else {
          v.user = response.data;
        }
      })
      axios.get("/dish/select").then(function (response) {
        v.Menu_Total_Arr=response.data;
      })
      axios.get("/type/select").then(function (response) {
        v.typeArr=response.data;
      })
    }
  })
</script>
</html>